<div>
    @if(request('cid'))
        <x-mini-header>
            <x-slot name="url"></x-slot>
            <x-slot name="title">{{ \App\Models\Category::find(request('cid'))?->title ?? '视频' }}</x-slot>
        </x-mini-header>

        <div class="py-4 grid grid-cols-1 divide-y whitespace-nowrap" wire:ignore>
            <div class="p-2 flex items-center gap-2 text-sm leading-relaxed">
                <a wire:navigate href="{{ request()->fullUrlWithoutQuery('vip') }}" class="px-2 rounded-full text-red-500 border border-red-500">观看类型</a>
                <a wire:navigate href="{{ request()->fullUrlWithQuery(['vip' => 1]) }}" @class(['px-2 rounded-full', 'text-red-500 border border-red-500' => request('vip') === '1'])>VIP</a>
                <a wire:navigate href="{{ request()->fullUrlWithQuery(['vip' => 0]) }}" @class(['px-2 rounded-full', 'text-red-500 border border-red-500' => request('vip') === '0'])>免费</a>
            </div>

            <div class="p-2 flex items-center gap-2 text-sm leading-relaxed">
                <a wire:navigate href="{{ request()->fullUrlWithoutQuery('sortBy') }}" @class(['px-2 rounded-full', 'text-red-500 border border-red-500' => request()->missing('sortBy')])>最新发布</a>
                <a wire:navigate href="{{ request()->fullUrlWithQuery(['sortBy' => 'play']) }}" @class(['px-2 rounded-full', 'text-red-500 border border-red-500' => request('sortBy') === 'play'])>最多播放</a>
                <a wire:navigate href="{{ request()->fullUrlWithQuery(['sortBy' => 'score']) }}" @class(['px-2 rounded-full', 'text-red-500 border border-red-500' => request('sortBy') === 'score'])>最高评分</a>
                <a wire:navigate href="{{ request()->fullUrlWithQuery(['sortBy' => 'like']) }}" @class(['px-2 rounded-full', 'text-red-500 border border-red-500' => request('sortBy') === 'like'])>最多点赞</a>
            </div>

            <div class="p-2 flex items-center gap-2 text-sm leading-relaxed">
                <a wire:navigate href="{{ request()->fullUrlWithoutQuery('tag') }}" @class(['px-2 rounded-full', 'text-red-500 border border-red-500' => 1])>所有类型</a>
                <div class="flex items-center overflow-x-auto" x-init="document.querySelector('.tag-active')?.scrollIntoView({behavior: 'smooth', block: 'end', inline: 'nearest'})">
                    @foreach(\App\Models\Tag::all() as $tag)
                        <a wire:navigate href="{{ request()->fullUrlWithQuery(['tag' => $tag->getKey()]) }}" @class(['px-2 rounded-full', 'tag-active text-red-500 border border-red-500' => request()->integer('tag') === $tag->getKey()])>{{ $tag->title }}</a>
                    @endforeach
                </div>
            </div>

            <div class="p-2 flex items-center gap-2 text-sm leading-relaxed">
                <a wire:navigate href="{{ request()->fullUrlWithoutQuery('abbr') }}" class="flex-none px-2 rounded-full text-red-500 border border-red-500">字母排序</a>
                <div class="flex items-center overflow-x-auto" x-init="document.querySelector('.abbr-active')?.scrollIntoView({behavior: 'smooth', block: 'end', inline: 'nearest'})">
                    @for($x = ord('a'); $x <= ord('z'); $x++)
                        @php($v = Str::of(chr($x))->upper()->value())
                        <a wire:navigate href="{{ request()->fullUrlWithQuery(['abbr' => $v]) }}" @class(['px-2 rounded-full', 'abbr-active text-red-500 border border-red-500' => request('abbr') === $v])>{{ $v }}</a>
                    @endfor
                </div>
            </div>
        </div>
    @elseif(request()->filled('search'))
        <x-mini-header>
            <x-slot name="url"></x-slot>
            <x-slot name="title">搜索视频</x-slot>

            <h2 class="font-bold text-xl text-center truncate pb-2">
                搜索 "<span class="text-red-600">{{ Str::of(request('search'))->limit(20) }}</span>"
                共 {{ $total }} 个资源
            </h2>
        </x-mini-header>
    @else
        <x-header>
            <x-nav/>
        </x-header>

        <x-search-bar/>
    @endif

    @if($collection->isEmpty())
        @include('partials.oops')
    @else
        <div class="grid grid-cols-2 gap-2 px-2 my-2">
            @foreach($collection as $v)
                <x-video-item :video="$v" :key="$v->id"/>
            @endforeach
        </div>

        @includeWhen($hasMorePages, 'partials.load-more')
    @endif
</div>
